<template>
	<view class="ns-record">
		<view class="title">
			库存记录
			<text class="iconfont iconguanbi1" @click="close"></text>
		</view>

		<view class="table">
			<view class="table-th">
				<view class="table-td" style="width: 15%;">规格名称</view>
				<view class="table-td" style="width: 12%;">业务类型</view>
				<view class="table-td" style="width: 14%;">原始数量</view>
				<view class="table-td" style="width: 14%;">变动数量</view>
				<view class="table-td" style="width: 14%;">剩余数量</view>
				<view class="table-td" style="width: 14%;">入库单价</view>
				<view class="table-td" style="width: 17%;">创建时间</view>
			</view>
			<scroll-view scroll-y="true" class="table-tb">
				<view class="table-tr" v-for="(item, index) in page_list" :key="index">
					<view class="table-td" style="width: 15%;">{{ item.spec_name ? item.spec_name : item.goods_name }}</view>
					<view class="table-td" style="width: 12%;">{{ item.name }}</view>
					<view class="table-td" style="width: 14%;">{{ item.before_store_stock }}</view>
					<view class="table-td" style="width: 14%;">{{ item.goods_num }}</view>
					<view class="table-td" style="width: 14%;">{{ item.after_store_stock }}</view>
					<view class="table-td" style="width: 14%;">{{ item.goods_price }}</view>
					<view class="table-td" style="width: 17%;">{{ $util.timeFormat(item.create_time) }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分页 -->
		<view class="pagination">
			<uni-pagination title="标题文字" @change="nationchange" :pageSize="page_size" show-icon="true" :total="total" :current="page"></uni-pagination>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sku_index: 0,
			//获取时间数据
			datetimesingle: '',
			//当前第几页数据
			page: 1,
			// 每页显示几条
			page_size: 8,
			//出入库类型
			keys: '',
			//初始时间
			start_time: '',
			// 结束时间
			end_time: '',
			//日志记录列表
			page_list: [],
			// 类型数据选择
			type_index: 0,
			//列表数据总量
			total: 0,
			my_sku_list: []
		};
	},
	props: {
		goods_id: {
			type: Number,
			default: () => {
				return 0;
			}
		},
		sku_list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	mounted() {
		this.getInformation();
	},
	methods: {
		// 规格选择
		bindskuChange(e) {
			this.sku_index = e.detail.value;
		},
		// 类型选择
		bindtypeChange(e) {
			this.type_index = e.detail.value;
		},
		// 获取开始选项
		changeStartTime(e) {
			this.start_time = e;
		},
		// 获取结束时间
		changeEndTime(e) {
			this.end_time = e;
		},
		// 分页发生变化
		nationchange(e) {
			this.page = e.current;
			this.getInformation();
		},
		// 获取数据
		getInformation() {
			this.$api.sendRequest({
				url: '/stock/storeapi/manage/records',
				data: {
					page: this.page,
					page_size: this.page_size,
					goods_id: this.goods_id,
					start_time: this.start_time,
					end_time: this.end_time
				},
				success: res => {
					if (res.code >= 0) {
						this.total = res.data.count;
						this.page_list = res.data.list.map((item, index) => {
							let unit = '';
							if (item.type == 'input') {
								unit = '+';
							} else {
								unit = '-';
							}
							item.goods_num = unit + item.goods_num;
							return item;
						});
					}
				}
			});
		},
		// 弹窗关闭
		close() {
			this.$emit('close', 'record');
		}
	}
};
</script>

<style lang="scss" scoped>
.ns-record {
	width: 100%;
	height: 100%;
	background: #ffffff;
	border-radius: 0.04rem;
	min-height: 2rem;
	padding-bottom: 0.4rem;
	.title {
		width: 100%;
		height: 0.5rem;
		border-bottom: 0.01rem solid #e6e6e6;
		font-size: 0.16rem;
		line-height: 0.5rem;
		text-align: center;
		position: relative;
		font-weight: bold;
		.iconguanbi1 {
			font-size: 0.2rem;
			position: absolute;
			top: 50%;
			right: 0.15rem;
			transform: translateY(-50%);
			font-weight: 500;
		}
	}
	.selectbox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0.15rem;
		box-sizing: border-box;
		.item-select1 {
			display: flex;
			align-items: center;
			margin-bottom: 0.2rem;
			margin-right: 0.4rem;
			.slect1-left {
				min-width: 1rem;
				text-align: right;
			}
			.slect1-right {
				width: 2.1rem;
				height: 0.3rem;
				display: flex;
				align-items: center;
				padding-right: 0.15rem;
				box-sizing: border-box;
				margin-left: 0.1rem;
				border: 0.01rem solid #e6e6e6;
				padding-left: 0.15rem;
				.uni-input {
					width: 1.7rem;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					.iconxiala {
						font-size: 0.18rem;
					}
				}
			}
			.slect1-right2 {
				width: 80%;
				display: flex;
				align-items: center;
				margin-left: 0.1rem;
				text {
					margin: 0 0.15rem;
				}
			}
		}
	}
	.table {
		width: 100%;
		height: 4rem;
		padding: 0 0.15rem;
		box-sizing: border-box;
		.table-th {
			width: 100%;
			height: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #f7f8fa;
			padding: 0 0.15rem;
			box-sizing: border-box;
		}
		.table-tb {
			width: 100%;
			height: calc(100% - 0.5rem);
			.table-tr {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 0.5rem;
				padding: 0 0.15rem;
				box-sizing: border-box;
				border-bottom: 0.01rem solid #e6e6e6;
			}
		}
	}
}

/deep/ .uni-date-single {
	height: 0.3rem;
}
.table-td {
	height: 100%;
	line-height: 0.5rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0.14rem;
}
.save {
	height: 0.3rem;
	line-height: 0.3rem;
}

.pagination {
	width: 100%;
	margin-top: 0.2rem;
}
</style>
